<template>
    <!-- 二维码登录 -->
    <div class="erwei">
        <h1 class="title" >微信扫码登录</h1>
          <div class="imgs" v-loading="loading">
             <img width="200px" alt="" :src="qrImg">
             <i class="mask" v-if="showQrMask" :style="maskBg" @click="updataQr"></i>
          </div>
          <p>
            <svg aria-hidden="true" class="icon-wx">
               <use xlink:href="#icon-weixin"></use>
            </svg>
            <b>扫描二维码</b>
          </p>
       </div>
    </template>
    <script>
    //引入socket.io
    import socketIo from 'socket.io-client'
    //引入qrcode
    import qrcode from 'qrcode'
    //引入api
    import * as api from '@/api/users'
    //引入成功和失败遮图片
    import invalidImg from '@/assets/img/invalidQr.png'
    import scancodeImg from '@/assets/img/scancode.png'
    
    import storage from '@/utils/storage'
    
    export default {
        props:{ //父传子
            storageUserInfo:{
                required:true
            }
        },
        data(){
            return {
                loading:true,
                //二维码图片
                qrImg:'',
                //是否显示遮罩
                showQrMask:false,
                //遮罩背景样式
                maskBg:{backgroundImage:`url(${scancodeImg})`},//扫描成功
               
    
            }
        },
        created(){
            //建立socket链接
            let io = socketIo('wss://chst.vip')
            // console.log(io)
            //监听链接的事件地址
            io.on('connectSuccess', ({sid})=>{
               //将sid存到本地
               storage.set('qf-sid',sid)
               this.getQrUrl(sid)
            })
            //无效二维码
            io.on('invalidCode',data=>{
                console.log(data)
                //展示遮罩
                this.showQrMask = true
                //显示无效的二维码遮罩样式
                this.maskBg.backgroundImage = `url(${invalidImg})`
            })
            //扫码成功
            io.on('scancodeSuccess',async({state,wechatCode,msg})=>{
                // console.log(data)
                //开启遮罩
                this.showQrMask = true
                this.maskBg.backgroundImage = `url(${scancodeImg})`
                if(state){
                    //调用微信登录的接口
                   let res = await api.wechatLoginApi(wechatCode)
                //    console.log(res)
                   //将内容存到本地
                   this.storageUserInfo(res.data)
                    //跳转到页面
                    this.$router.push('/Home')
                }else{
                    console.error(msg)
                }
            })
        },
        
        methods:{
            
             //请求获取二维码地址
            async getQrUrl(sid){
              this.loading = true
              let res = await api.getQrCodeApi(sid)
              console.log(res)
               let {scanCodeUrl:qrcodeUrl} = res.data
               //通过qrcode插件，生成二维码 
               qrcode.toDataURL(qrcodeUrl,(err,img)=>{
                if(err){ 
                    throw err
                }
                // console.log(img)
                this.qrImg = img
                //关掉遮罩
                this.showQrMask = false
                this.loading = false
               })
            },
            //更新二维码地址
            updataQr(){
                //获取本地存储的sid
                let sid =  storage.get('qf-sid')
                console.log(sid)
                this.getQrUrl(sid)
            }
        }
    }
    </script>
    <style lang="less" scoped>
        .imgs{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            position: relative;
           /deep/ .mask{
           
            // width:100%;
            // height: 100%;
            // background-repeat: no-repeat;
            width: 100%;
          height: 100%;
          opacity: 0.8;
          background-color: #fff;
          position: absolute;
          left: 0;
          // background-image: url("../../assets/img/scancode.png");
          background-size: 50%;
          background-repeat: no-repeat;
          background-position: center;
          cursor: pointer;//小手
    
            
    
        }
        }
        .icon-wx{
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-left: 148px;
            // cursor: pointer;//小手
        }
        .title{
        font-size: 30px;
        text-align: center;
        margin-bottom: 30px;
        color: #fff;
    }
      
    </style>